import React, {Component} from 'react';
import {Link} from 'react-router-dom';
import './search.scss';
export default class Search extends Component{
   constructor(props){
       super(props);
       this.state = {
           hide: false,
           headVal: '搜索',
           isSearch: true,
           serachVal: '',
           searchList: []
       }
   }
    render () {
        return (
            <div className="search">
                <div className="mask">             
                <div className="search_head">
                    <i className={`iconfont icon-left-angle ${this.state.isSearch ? 'show' : 'hide'}`} onClick={this.searchSelect.bind(this)}></i>
                    <div className="search_input">
                     <input type="text" value={this.state.serachVal} ref="input" onFocus={this.hide.bind(this)} onChange={this.val.bind(this)}/>
                     <div className={`hover ${this.state.hide ? 'hide' : 'show'}`} onClick={this.hide.bind(this)}>
                         <i className="iconfont icon-sousuo"></i>
                         <span>搜索商品 分类 功效</span>
                     </div>
                    </div>
                    <span>{this.state.headVal}</span>
                </div>
                <div className="search_list">
                    <ul>
                       {
                           this.state.searchList.map((item,index) => {
                               return (
                                <li className="recommend_list" key={index}>
                                    <Link to="/home/home">
                                    <i className="iconfont icon-sousuo"></i>
                                    <span className="search_result">{item}</span>
                                    <i className="iconfont icon-right"></i>
                                    </Link>
                                </li>
                               )
                           })
                       }
                    </ul>
                </div>
                </div>
            </div>
        )
    }
    val (e) {
        if (e.target.value.length === 0){
            this.setState({
                hide: false
            })
        } else {
            this.setState({
                hide: true
            })
        }
        this.setState({
            serachVal: e.target.value,
            searchList: [...this.state.searchList, e.target.value]
        })
        console.log(e.target.value)

    }
    hide () {
        this.refs.input.focus();
        this.setState({
            hide: true
        })
    }
    searchSelect () {
        this.setState({
            headVal: '返回',
            isSearch: false
        })
    }
}